<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<title>Rooms Availability Update</title>
</h:head>
<f:view>
	<h:body>
		<ui:composition template="../includes/template.xhtml">
			<ui:define name="mainbody">
				<center>
              <p:panel header="Rooms' Availability Update" style="min-height: 550px" styleClass="prime_panel">


					<p:growl id="growl" showDetail="true" sticky="false" autoUpdate="true"  showSummary="false" />
					<center>
					<h:form id="form">
				    <p:dataTable style="width: 100%" id="rooms" var="room"
				    	value="#{roomStatusUpdateBean.roomsModel}"
				    	paginator="true" rows="10" paginatorPosition="bottom"
				        selection="#{roomStatusUpdateBean.selectedRoomsList}">
				
				        <p:column selectionMode="multiple"  style="width:18px" />
				
						<p:column headerText="Room Title" filterBy="#{room.roomTitle}" style="width:50%">
				            #{room.roomTitle}  
				        </p:column>
				
				        <p:column headerText="Capacity" style="width:25%">
				            #{room.capacity}  
				        </p:column>
				        
				        <p:column id="status" headerText="Availability" style="width:25%">
				            <center>
				            	#{room.status eq true ? "Available" : "Not Available"}
				        	</center>
				        </p:column>
				
				        <f:facet name="footer">
				            <p:commandButton id="multiViewButton" value="Change Status"
				                             update=":form:displayMulti" oncomplete="multiRoomDialog.show()"/>
				        </f:facet>
				    </p:dataTable>
				
				    <p:dialog id="multiDialog" header="Selected Rooms" widgetVar="multiRoomDialog"
				              showEffect="fade" hideEffect="explode">
				
				        <p:dataList id="displayMulti"
				                value="#{roomStatusUpdateBean.selectedRoomsList}" var="selectedRoom">
				            Name: #{selectedRoom.roomTitle} currently #{selectedRoom.status eq true ? "Available" : "Not Available"} for classes
				        </p:dataList>
				        
				        <table>
							<tr>
								<td><h:outputLabel>Change Availability to:</h:outputLabel></td>
								<td>
									<p:selectOneRadio id="options"
										value="#{roomStatusUpdateBean.newStatus}">
										<f:selectItem itemLabel="Available" itemValue="true" />
										<br />
										<f:selectItem itemLabel="Un-Available" itemValue="false" />
									</p:selectOneRadio>
								</td>
							</tr>			        	
				        </table>
						<p:commandButton id="submit" value="Update" type="submit" ajax="false" action="#{roomStatusUpdateBean.perform}"/>
				    </p:dialog>
				    </h:form>
				    </center>
				</p:panel>

		</center>
			</ui:define>
		</ui:composition>
	</h:body>
</f:view>
</html>
			